<template>
  <view class="cityWrap">
    <text class="title">{{keys}}</text>
    <view class="list">
      <text
        class="item"
        v-for="innerItem of item"
        :key="innerItem.id"
        @click="clickCity(innerItem.name)"
      >{{innerItem.name}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Array,
      default () {
        return []
      }
    },
    keys: {
      type: String,
      default: ''
    }
  },
  methods: {
    clickCity (val) {
      this.$emit('getCity', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.cityWrap {
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;
  .title {
    height: 60rpx;
    line-height: 60rpx;
    color: $u-success;
    font-size: 28rpx;
  }
  .list {
    display: flex;
    flex-direction: column;
    .item {
      height: 60rpx;
      line-height: 60rpx;
      box-sizing: border-box;
      border-bottom: 1rpx dotted #eee;
    }
  }
}
</style>
